<template>
  <div>
    <div id="editor" class="editor" style="margin-top: 30px;"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  import {
    uploadOssFile
  } from '@/shop/util/oss.js'
  export default {
    name: 'editor',
    props:{
      detail:{
        type:String,
        default:''
      }
    },
    watch:{
      detail(newVal,oldVal){
        this.editor.txt.html(newVal)
      }
    },
    data() {
      return {
        editor: null
      }
    },
    mounted() {
      this.editor = new E('#editor')
      this.seteditor()
    },
    methods: {
      seteditor() {
        // 配置服务端上传图片的路径
        this.editor.config.uploadImgServer = '/upload-img'
        //限制文件类型
        this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
        // 前端直传图片到oss
        this.editor.config.customUploadImg = function(resultFiles, insertImgFn) {
          uploadOssFile(resultFiles[0]).then(res => {
            insertImgFn(res)
          });
        };
        // 前端直传视频到oss中
        this.editor.config.customUploadVideo = function(resultFiles, insertVideoFn) {
          uploadOssFile(resultFiles[0]).then(res => {
            insertVideoFn(res)
          });
        };
        // 监控内容变化
        this.editor.config.onchange = (html)=> {
          this.$emit('enduitChange',html)
        }
        this.editor.create();
      }
    }
  }
</script>
